<template>
	<w-layout showNavbar navTitle="福利屋" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #navRight>
			<view @click="popup.showRule = true" class="">
				规则
			</view>
		</template>
		<template #default>
			<view class="container">
				<view class="public-input-2 px-10 py-12 my-15 color">
					<up-search 
						placeholder="请输入关键字" 
						v-model="state.command"
						clearabled
						bgColor="transparent"
						:showAction="false"
						:color="publicStyles['--color-t1']"
						@change="searchChange"
					></up-search>
				</view>
				<view class="px-100">
					<up-tabs
						@change="tabChange"
						:list="tabs.list" 
						:current="tabs.current"
						lineWidth="14"
						lineHeight="14"
						:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
						:activeStyle="{
							color: publicStyles['--color'],
							fontWeight: 'bold',
							transform: 'scale(1.2)'
						}"
						:scrollable="false"
						itemStyle="height: 60px;"
					>
					</up-tabs>
				</view>
				
				<view class="" style="">
					<view style="min-height: 320rpx;position: relative;" class="public-card-4 fc px-40 pt-40 mt-40" v-for="(item,index) in state.list" :key="index">
						<view class="fr-ac">
							<image style="width: 112rpx;height: 112rpx;border-radius: 50%;" :src="item.headimg" mode=""></image>
							<view class="ml-20 flex-1">
								<view class="">
									{{item.title}} <text class="op-70 ml-20">共{{item.goods_num}}件</text>
								</view>
								<view class="fr-ac mt-20">
									<image style="width: 24rpx;height: 24rpx;" src="/static/icon/public/people.png" mode="widthFix"></image>
									<view class="ml-5 mr-40">
										{{item.user_num}}
									</view>
									
									<image style="width: 24rpx;height: 24rpx;" src="/static/icon/public/fire.png" mode="widthFix"></image>
									<view class="ml-5">
										{{item.goods_total_price}}
									</view>
									
									<view v-if="tabs.current == 0" @click="goDetail(item)" class="ml-auto fr-ac">
										<image style="width: 28rpx;height: 28rpx;" src="/static/icon/public/add.png" mode="widthFix"></image>
										<view class="color ml-5">
											立即加入
										</view>
									</view>
									<view v-if="tabs.current == 1 || tabs.current == 2" @click="goDetail(item)" class="ml-auto fr-ac">
										<view class="color mr-5">
											中赏详情
										</view>
										<image style="width: 28rpx;height: 28rpx;" src="/static/icon/public/right-fill.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
						<scroll-view class="mt-auto" scroll-x="true" >
							<view class="fr-ac mb-25">
								<view class="mr-20" v-for="(item2,index2) in item.goods_info" :key="index2">
									<cut-corner :arrow="2" clipSize="15rpx">
										<image style="width: 80rpx;height: 80rpx;" :src="item2.imgurl" mode="widthFix"></image>
									</cut-corner>
								</view>
							</view>
						</scroll-view>
						
						<view class="public-cover-3 px-18 py-8 color fs-24" style="position: absolute;top: 4rpx;right: 4rpx;">
							{{item.nickname}}
						</view>
					</view>
				</view>
				<no-more :show="state.list.length == 0"></no-more>
				
				
				<fixed-bottom>
					<template #default>
						<view class="px-40 w-100 h-100 fr-ac-jsb">
							<view @click="$u.route('/pages/benefit/create_history')" class="public-btn-6 fr-ac-jc color" style="width: 174rpx;height: 60rpx;">
								创建记录
							</view>
							<view @click="$u.route('/pages/benefit/create')" class="public-btn-6 fr-ac-jc color" style="width: 174rpx;height: 60rpx;">
								创建赏屋
							</view>
							<view @click="$u.route('/pages/benefit/history')" class="public-btn-6 fr-ac-jc color" style="width: 174rpx;height: 60rpx;">
								中赏记录
							</view>
						</view>
					</template>
				</fixed-bottom>
				
				
				<up-popup :show="popup.showRule" @close="popup.showRule = false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-2 px-50 py-20 fc" style="width: 670rpx;min-height: 760rpx;position: relative;">
						<view class="fs-36">
							规则说明
						</view>
						<view class="mt-80" style="max-height: 400rpx;overflow: scroll;line-height: 1.8;">
							<view class="" style="line-height: 1.8;">
								<up-parse :content="state.rule"></up-parse>
							</view>
						</view>
						<view @click="popup.showRule = false;" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								确认
							</view>
						</view>
					</view>
				</up-popup>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		debounce
	} from '@/common/common'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		welfare,
		get_parse
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		get_welfare()
		get_parseApi(28)
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	onReachBottom(()=>{
		if(state.last_limit == state.limit){
			state.page++
			get_welfare()
		}
	})
	
	const page = reactive({
		scrollTop:0
	})
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:1,
				name:'进行中',
			},
			{
				id:3,
				name:'已参与',
			},
			{
				id:2,
				name:'已结束',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
		initData()
		get_welfare()
	}
	
	const state = reactive({
		list:[],
		page:1,
		limit:15,
		last_limit:15,
		
		command:'',
		rule:'',
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	
	
	const popup = reactive({
		showRule:false,
	})
	
	async function get_welfare(){
		const res = await welfare({
			type: tabs.list[tabs.current].id,
			command:state.command,
			page: state.page
		})
		state.last_limit = res.room.list.length
		state.list = state.list.concat(res.room.list)
	}
	
	
	async function get_parseApi(type){
		const res = await get_parse({
			type
		})
		state.rule = res
	}
	
	const searchChange = debounce(function(e){
		console.log(e)
		initData()
		get_welfare()
	})
	
	
	function goDetail(item){
		uni.navigateTo({
			url:`/pages/benefit/detail?id=${item.id}`
		})
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
</style>